<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>上传文件测试</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="//mirror.fe80.cn/layui/2.6.8/css/layui.css"  media="all">
        <style media="screen">
        .layui-progress {
            border-radius: 2px;
        }
        .layui-progress-bar {
            border-radius: 2px;
        }
        </style>
    </head>
    <body>
        <div class="layui-container">
            <blockquote class="layui-elem-quote">您可以选择任何文件，上传至云存储，然后在列表中查看您刚刚上传的文件。</blockquote>

            <div class="layui-progress layui-progress-big" lay-filter="demo">
                <div class="layui-progress-bar" lay-percent="0%"></div>
            </div>

            <span id="demoText"></span>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>常规使用：文件上传</legend>
            </fieldset>

            <div class="layui-form-item">
                <div class="layui-inline">
                  <!-- <label class="layui-form-label">姓名：</label> -->
                  <div class="layui-input-inline">
                    <input type="text" name="name" id="iname" lay-verify="required" autocomplete="off" class="layui-input" placeholder="请输入姓名">
                  </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                  <!-- <label class="layui-form-label">文件：</label> -->
                  <div class="layui-input-inline">                    
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传文件</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" id="demo1">
                        </div>
                    </div>
                  </div>
                </div>
            </div>

            
        </div>
    </body>
<script src="//mirror.fe80.cn/layui/2.6.8/layui.js" charset="utf-8"></script>
<script>
var Bucket = 'cq-1252015630';
var Region = 'ap-chongqing';
layui.use(['form','upload','element'],function(){
    var form = layui.form, $=layui.jquery, upload = layui.upload, element = layui.element;
    //绑定文件域
    upload.render({
        elem: '#test1',
        // url: 'http://127.0.0.1:12345/v1/upload',
        url: 'http://www.fe80.cn:12345/v1/upload',
        exts:'jpg|png|gif|bmp|jpeg|docx|doc|xlsx|xls|ppt|pptx',
        accept: 'file',
        // auto: false,
        size: 4096,
        before: function(obj){
            this.data.name = $("#iname").val();
            this.data.name = $.trim(this.data.name);
            if(this.data.name.length < 1){
                layer.msg('请填写姓名', {icon: 2, time: 0});
                return false;
            }
            element.progress('demo', '0%'); //进度条复位
            layer.msg('上传中', {icon: 16, time: 0});
        }
        // ,choose: function(obj){
        //     /**
        //      * index 得到文件索引
        //      * file 得到文件对象
        //      * result 得到文件base64编码，比如图片
        //      */
        //     obj.preview(function(index, file, result){
                
        //     });
        // }
        ,done: function(res){
            element.progress('demo', '100%'); //进度条复位
            layer.msg('上传成功');
            console.log(res);
        },progress: function(n, elem, e){
            element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
            // if(n == 100){
            //     layer.msg('上传完毕', {icon: 1});
            // }
        }
    });
});
</script>
</html>
